<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebLogo 3 - Create </title>
    <!--base responsive code-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--original meta data-->
    <meta name="author" content="Gavin E. Crooks">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="logo.css">
    <title>WebLogo Create Layout Template</title>
    <!--styling for error message for sequence input-->
    <style type="text/css">
    .error {
        color: #900;
        border-left: red solid +4pt;
    }
    
    .err_msg {
        color: #900;
    }
    
    .err_msg .btn {
        color: #000;
    }
    </style>
    <!--jquery libraries-->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- ========Start Bootstrap dependencies ==========-->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!-- ========= end Bootstrap dependencies======= -->

</head>

<body>
    <!--Navigation-->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./">WebLogo 3</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="./">home</a></li>
                    <li class="active"><a href="create.cgi">create</a></li>
                    <li><a href="examples.html">examples</a></li>
                    <li><a href="manual.html">manual</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <!--end Navigation-->
    <div class="container-fluid">
        <!--start fluid container for responsive content-->
        <div class="row">
            <!--outermost row container-->
            <h1><p class="text-center"> WebLogo 3: Create</p></h1>
            <form enctype="multipart/form-data" action="create.cgi" name="logoform" method="post">
                <!--start WebLogo form-->
                <div class="row">
                    <!--open sequence data form row-->
                    <div class="col-sm-1">
                        <br>
                    </div>
                    <!--left margin column for sequence data form -->
                    <div class="col-sm-10">
                        <!--central column for sequence data form-->
                        <div class="thumbnail clearfix row" id="thumbnail-1">
                            <!--open thumbnail 1 div-->
                            <h2> Sequence Data Input:</h2>
                            <hr>
                            <div class="form-group clearfix">
                                <!--start clearfix div for browse & open buttons-->
                                <div class="col-sm-4">

                                    <input type="file" name="sequences_file"></input>
                                        </div> 

                                <div class="col-sm-2"> <!--center spacing div-->
                                </div>

                                  <!--start URL download container div-->
                                <div class="form-group col-sm-4" id="URL-upload">
                                    
                                   <label>URL:</label>
                    <input type="text" name="sequences_url" placeholder="URL of sequences" id="url-upload" value="${sequences_url}">
                </div>                                  
                                                        
                                </div> <!--end URL download container div-->
                            </div> <!--start clearfix div for browse & open buttons-->
                           
                            <div class="form-group">
                                <!--open paste seqence data textbox div-->
                                <label class="err_msg">${error_message}</label>
                                <textarea type="text" class="form-control" id="sequence-data" name="sequences" style="width:100%" placeholder="Or Paste Sequence Data Here">${sequences}</textarea>
                            </div>
                            <!--close paste seqence data textbox-->
                            <div class="form-group row">
                                <!--Start div for Download and Dropbox button-->
                                <div class="col-sm-8">
                                    <!--start create&clear button column-->
                                    <div class="form-group">
                                        <!--open create&clear button div-->
                                        <button class="btn btn-success btn-md" type="submit" name="cmd_create">
                                            <span class="glyphicon glyphicon-ok"></span> Create WebLogo
                                        </button>
                                        <button type="button" class="btn btn-default" name="cmd_clear" onclick="document.logoform.sequences.value='';"> Clear</button>
                                    </div>
                                    <!-- end create&clear button div-->

                                    
                                </div> <!--end .col-sm-8 create&clear button column-->
                                
                                <div class="col-sm-4"><!--start spacing div for download checkbox-->
                                    
                                    <div class="form-group">
                                        <!--start download checkbox div-->
                                        <label>
                                            <input type="checkbox" name="download" value="false">&nbsp Download to local drive
                                        </label>
                                    </div>
                                    <!--end download checkbox div div-->
                                </div>
                            </div>
                            <!--End clearfix row div for Download and Dropbox button-->
                        </div>
                        <!--end clearfix #thumbnail-1 div-->
                    </div>
                    <!--end col-sm-10 central column for sequence data form-->
                    <div class="col-sm-1"> <!--start margin row for sequence data form-->
                        <br>
                    </div><!--end margin row for sequence data form-->

                </div>
                <!--end sequence data form row-->
                <div class="row">
                    <!--start row for logo options-->
                    <div class="col-sm-1">
                        <br>
                    </div>
                    <!--left column margin for logo options form-->
                    <div class="col-sm-10" id="wrap">
                        <!--central col-sm-10 logo options column-->
                        <div class="thumbnail col-sm-6" id="thumbnail-2">
                            <!--start thumbnail-2 div; left side logo options-->
                            <div class="form-group">
                                <!--open title div-->
                                <label>Title:</label>
                        <input type="text" name="logo_title" value="${logo_title}" maxlength="80" placeholder="max 80 char " id="title">
                    </div>
                            <!--close title div-->
                            <div class="form-group clearfix">
                                <!--open output format div-->
                                <label>Output Format:</label>
                                
                                    <!--open div for format options-->
                                    <select name="format">
                                        <option ${png} value="png">PNG (low res.)</option>
                                        <option ${png_print} value="png_print">PNG (high res.)</option>
                                        <option ${jpeg} value="jpeg">JPEG (low res.)</option>
                                        <option ${eps} value="eps">EPS (vector)</option>
                                        <option ${pdf} value="pdf">PDF (vector)</option>
                                        <option ${svg} value="svg">SVG (vector)</option>
                                        <option ${logodata} value="logodata">Data (plain text)</option> 
                                    </select> 
                                
                                <!--close div for format options-->
                            </div>
                            <!--close output format div-->

                            <!--open div for sequence type option-->
                            <div class="form-group">
                                <label ${alphabet_err}>Sequence type </label>
                                <select type="submit" name="alphabet">
                                    <option ${alphabet_auto} value="alphabet_auto" >auto</option>
                                    <option ${alphabet_protein} value="alphabet_protein">protein</option>
                                    <option ${alphabet_dna} value="alphabet_dna">dna</option>
                                    <option ${alphabet_rna} value="alphabet_rna">rna</option>
                                </select>
                            </div> <!--close dive for sequence type option-->    

                            <div class="form-group">
                                <!--open logo-size div-->
                                <label ${size_err}>Logo-size: </label>
                                <select type="submit" name="stack_width">
                                    <option ${small}>small</option>
                                    <option ${medium}>medium</option>
                                    <option ${large}>large</option>
                                </select>
                            </div>
                            <!--close logo-size div-->
                            <div class="form-group">
                                <!--open Stacks per Line div-->
                                <label ${stacks_per_line_err}>Stacks per Line:</label>
                                <input type="text" name="stacks_per_line" size="8" value="${stacks_per_line}" placeholder="40">
                            </div>
                            <!--close div for format options-->


                            <div class="form-group">
                                <!--open Ignore lower case div-->
                                <label>Ignore lower case:
                                    <input type="checkbox" name="ignore_lower_case" value="true" ${ignore_lower_case}>
                                </label>
                            </div>
                            <!--close ignore lower case div-->
                            <div class="form-group">
                                <!--open Units div-->
                                <label>Units: </label>
                                <select name="unit_name">
                                    <option ${probability}>probability</option>
                                    <option ${bits}>bits</option>
                                    <option ${nats}>nats</option>
                                    <option ${kT}>kT</option>
                                    <option ${kJ_mol}>kJ/mol</option>
                                    <option ${kcal_mol}>kcal/mol</option>
                                </select>
                            </div>
                            <!--close Units div-->
                            <div class="form-group">
                                <!--open first position number div-->
                                <label ${first_index_err}> First position number: </label>
                                <input type="text" name="first_index" placeholder="max length 80" size="4" maxlength="80" value="${first_index}">
                            </div>
                            <!--close first position div-->
                            <div class="form-group">
                                <!--open logo range div-->
                                <label ${logo_range_err}> Logo range: </label>
                                <input type="text" placeholder="logo start" name="logo_start" value="${logo_start}" size="4" maxlength="80"> -
                                <input type="text" placeholder="logo end" name="logo_end" value="${logo_end}" id="formGroupInputSmall" size="4" maxlength="80">
                            </div>
                            <!--close logo range div-->
                            <div class="form-group">
                                <!--open figure label div-->
                                <label>Figure label:</label>
                                <input type="text" name="logo_label" value="${logo_label}" maxlength="100">
                            </div>
                            <!--close figure label div-->
                            <div class="form-group">
                                <!--open scale stack div-->
                                <label>Scale stack widths: </label>
                                <input type="checkbox" name="scale_width" value="true" ${scale_width}>
                            </div>
                            <!--close scale stack div-->
                            <div class="form-group">
                                <!--open composition div-->
                                <label ${composition_err}>Composition:</label>
                                <select name="composition">
                                    <option ${comp_none} value="comp_none">No adjustment for composition</option>
                                    <option ${comp_auto} value="comp_auto">auto</option>
                                    <option ${comp_equiprobable} value="comp_equiprobable">equiprobable</option>
                                    <option ${comp_CG} value="comp_CG">Percentage CG &#8658;</option>
                                    <option ${comp_Celegans} value="comp_Celegans">C. elegans (36%) </option>
                                    <option ${comp_Dmelanogaster} value="comp_Dmelanogaster">D. melanogaster (43%)</option>
                                    <option ${comp_Ecoli} value="comp_Ecoli">E. coli (50.5%) </option>
                                    <option ${comp_Hsapiens} value="comp_Hsapiens">H. sapiens (40%) </option>
                                    <option ${comp_Mmusculus} value="comp_Mmusculus">M. musculus (42%)</option>
                                    <option ${comp_Scerevisiae} value="comp_Scerevisiae">S. cerevisiae (38%)</option>
                                </select>
                                <span>or</span>
                                <input type="text" name="percentCG" value="${percentCG}" size="4" maxlength="8">
                                <span> % CG </span>
                            </div>
                            <!--close composition div-->


                            <div id="padding-div">
                                <br>
                            </div>
                        </div>
                        <!--close 2nd thumbnail column-->
                        <div class="thumbnail col-sm-6" id="thumbnail-3">
                            <!--start third thumbnail ; right side logo options-->

                                                        <!--start error bars div-->
                            <div class="form-group">
                                <label>Error bars: </label>
                                <input type="checkbox" name="show_errorbars" value="true" ${show_errorbars} checked>
                            </div>
                            <!--end error bars div-->


                            <div class="form-group">
                                <!--start Sequence Ends labels:div-->
                                <label>Show Sequence Ends labels:</label>
                                <input type="checkbox" name="show_ends" value="true" ${show_ends}>
                            </div>
                            <!--end Sequence Ends labels:div-->
                            <div class="form-group">
                                <!--start Version fineprint: -->
                                <label>Version fineprint: </label>
                                <input type="checkbox" name="show_fineprint" value="true" checked ${show_fineprint}>
                            </div>
                            <!--end Version fineprint: -->
                            <div class="form-group">
                                <!--start x-axis div-->
                                <label>X-axis</label>
                                <input type="checkbox" name="show_xaxis" value="true" ${show_xaxis}>
                                <span>Label: </span>
                                <input type="text" name="xaxis_label" value="${xaxis_label}" size="20" maxlength="100">
                            </div>
                            <!--end x-axis div-->
                            <div class="form-group">
                                <!--start y-axis div-->
                                <label>Y-axis</label>
                                <input type="checkbox" name="show_yaxis" value="true" ${show_yaxis}>
                                <span>Label: </span>
                                <input type="text" name="yaxis_label" value="${yaxis_label}" size="20" maxlength="32">
                            </div>
                            <!--end y-axis div-->
                            <div class="form-group">
                                <!--start y-axis scale div-->
                                <label>Y-axis scale:</label>
                                <input type="text" name="yaxis_scale" value="${yaxis_scale}" size="4" maxlength="100" placeholder="100 character max">
                            </div>
                            <!--end y-axis scale div-->
                            <div class="form-group">
                                <!--Y-axis tic spacing-->
                                <label>Y-axis tic spacing:</label>
                                <input type="text" name="yaxis_tic_interval" value="${yaxis_tic_interval}" placeholder="Y-axis tic spacing" size="4" maxlength="100">
                            </div>
                            <div class="form-group" >
                                <!--start color scheme div-->
                                <label ${color_scheme_err}>Color scheme: </label>
                                <select name="color_scheme">
                                    <option ${color_auto} value="color_auto">Auto</option>
                                    <option ${color_monochrome} value="color_monochrome">Monochrome</option>
                                    <option ${color_base_pairing} value="color_base_pairing">Base pairing (NA default)</option>
                                    <option ${color_classic} value="color_classic">Classic (NA)</option>
                                    <option ${color_hydrophobicity} value="color_hydrophobicity">Hydrophobicity (AA default)</option>
                                    <option ${color_chemistry} value="color_chemistry">Chemistry (AA)</option>
                                    <option ${color_charge} value="color_charge">Charge (AA)</option>
                                    <option ${color_custom} value="color_custom">Custom (Specify below)</option>
                                </select>
                                <!--&nbsp; Color key:
                          <input type="checkbox" name="show_color_key" value="true" ${show_color_key} disabled >
                          -->
                            </div>
                            <!--end color scheme div-->

                            <div class="row">
                            <div class="col-sm-5">  

                              <div class="form-group stacked-textfields" id="Symbols">
                                <!--start symbols div-->
                              
                                <div>
                                    <label>Symbols:</label>
                                </div>
                                <div>
                                    <!--start symbol options-->
                                    <input name="symbols0" type="text"  maxlength="64" value="${symbols0}">
                                    <input name="symbols1" type="text"  maxlength="64" value="${symbols1}">
                                    <input name="symbols2" type="text"  maxlength="64" value="${symbols2}">
                                    <input name="symbols3" type="text"  maxlength="64" value="${symbols3}">
                                    <input name="symbols4" type="text"  maxlength="64" value="${symbols4}">
                                </div>
                                <!--end symbol options-->
                               </div>
                            </div>
                            <!--end symbols div-->

                            <div class="col-sm-5"> 

                                <div class="form-group stacked-textfields" id="Colors">
                                <!--start colors div-->
                                <div>
                                    <label>Color:</label>
                                </div>
                                <div>
                                    <input name="color0" type="text" maxlength="64" value="${color0}">
                                    <input name="color1" type="text" maxlength="64" value="${color1}">
                                    <input name="color2" type="text" maxlength="64" value="${color2}">
                                    <input name="color3" type="text" maxlength="64" value="${color3}">
                                    <input name="color4" type="text" maxlength="64" value="${color4}">
                                </div>
                              </div>

                            </div>
                          </div> <!--end row for color and symbols div-->
                           
                            <!--end colors div-->
                            <div class="form-group">
                                <!--start reset defaults div-->
                                <!--Reset defaults must come after create_logo so that hitting enter creates a logo-->
                                <input type="submit" class="btn btn-default btn-sm" name="cmd_reset" value= "Reset Defaults"> 
                                
                            </div>
                            <!--end reset defaults div-->
                        </div>
                        <!--close 3rd thumbnail group-->

                        <!--start 4th thumbnail group-->
                        <div class="thumbnail clearfix" id="thumbnail-4">
                         
                            <div class="form-group">
                                <!--start create weblogo bottom button div-->
                                 <button class="btn btn-success btn-lg" type="submit" name="cmd_create" id="last-button">
                                <span class="glyphicon glyphicon-ok"></span> Create WebLogo </button>
                            </div>
                            <!--end create weblogo bottom button div-->
                        </div>
                        <!--end 4th thumbnail group-->
                    </div>
                    <!--end col-sm-10 central logo options column-->
                    <div class="col-sm-1">
                        <br>
                    </div>
                    <!--right column margin for logo options form-->
                </div>
                <!--end row for logo options-->
            </form>
            <!--end WebLogo form-->
            <div class="footer row" id="footer">
                <br>
            </div>
        </div>
        <!--end outermost row container-->
    </div>
    <!--end fluid container for responsive content-->
    <!--fallback to server-hosted files in case CDNs fail-->

    <!--Google analytics-->
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-5951066-1");
    pageTracker._trackPageview();
    </script>
</body>

</html>
